<template>
  <el-form class="drug-info" :inline="true" :model="form" :rules="rules" label-width="100px" ref="form">
    <div class="drug-info-li" v-if="showSearch">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-row :gutter="0">
            <el-col :span="6">
              <span>药品查询：</span>
            </el-col>
            <el-col :span="18">
              <el-input size="small" placeholder="输入药品条形码"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3">
          <el-input size="small" placeholder="国药准字号"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input size="small" placeholder="药品名称"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="drug-info-li">
      <div class="drug-info-li-title">
        <el-divider direction="vertical"></el-divider>
        <span>基本信息</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="药品名称" prop="drugName">
            <el-input v-model="form.drugName" size="small" placeholder="请输入药品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格" prop="drugSpec">
            <el-input v-model="form.drugSpec" size="small" placeholder="请输入规格:100ml:0.9g"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="厂家" prop="drugManufactor">
            <el-input v-model="form.drugManufactor" size="small" placeholder="请输入厂家"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="药品编码" prop="drugCode">
            <el-input v-model="form.drugCode" size="small" placeholder="请输入药品编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批准文号" prop="approvalNumber">
            <el-input v-model="form.approvalNumber" size="small" placeholder="请输入批准文号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="剂型" prop="doseForm">
            <el-input v-model="form.doseForm" size="small" placeholder="请输入剂型"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="库位号" prop="drugNo">
            <el-input v-model="form.drugNo" size="small" placeholder="请输入存放位置"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效标志" prop="status">
            <el-radio v-model="form.status" :label="0">正常</el-radio>
            <el-radio v-model="form.status" :label="1">无效</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="drug-info-li">
      <div class="drug-info-li-title">
        <el-divider direction="vertical"></el-divider>
        <span>规格信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12" class="drug-info-inline">
          <el-form-item label="最小剂量" prop="minDose">
            <el-input-number v-model="form.minDose" placeholder="0"></el-input-number>
          </el-form-item>
          <el-form-item label="单位" prop="doseUnit">
            <el-input v-model="form.doseUnit" size="small" placeholder="片"></el-input>
          </el-form-item>
          <el-form-item label="*" style="width: 2px !important; padding-top: 30px; box-sizing: border-box;"/>
          <el-form-item label="总剂量" prop="totalDose">
            <el-input-number v-model="form.totalDose" placeholder="100"></el-input-number>
          </el-form-item>
          <el-form-item label="单位" prop="totalDoseUnit">
            <el-input v-model="form.totalDoseUnit" size="small" placeholder="片"></el-input>
          </el-form-item>
          <el-form-item label="/" style="width: 2px !important; padding-top: 30px; box-sizing: border-box;"/>
          <el-form-item label="包装单位" prop="packageUnit">
            <el-input v-model="form.packageUnit" size="small" placeholder="盒"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" class="drug-info-inline">
          <el-form-item label="示例">
            <el-dropdown @command="onCommand">
              <span class="el-dropdown-link">
                <img :src="doseDomeSel" style="width: 100px;height: 30px"/>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="drug-info-dropdown">
                <template v-for="(item, index) in doseDome"> 
                  <el-dropdown-item :key="index" :command="item.command">
                    <img :src="item.img" style="width: 116px; height: 40px;"/>
                    <span>{{item.text}}</span>
                  </el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-col>
        <el-col :span="4" class="drug-info-inline">
          <el-form-item label="正确填写方式">
            <span class="drug-info-refer">{{doseDomeText}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="drug-info-li">
      <div class="drug-info-li-title">
        <el-divider direction="vertical"></el-divider>
        <span>销售信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="零售价" prop="salePrice">
            <el-input-number v-model="form.salePrice" :precision="4" placeholder="请输入零售价"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否拆零" prop="isSellPiece">
            <el-radio v-model="form.isSellPiece" @change="onChangeSellPiece" :label="0">是</el-radio>
            <el-radio v-model="form.isSellPiece" @change="onChangeSellPiece" :label="1">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拆零价格" prop="sellPiecePrice">
            <el-input-number 
              v-model="form.sellPiecePrice" 
              placeholder="请输入拆零价"
              :disabled="form.isSellPiece == 1"
               :precision="4"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="库存预警" prop="stockWarning">
            <el-input-number v-model="form.stockWarning" placeholder="请输入库存预警"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否皮试" prop="isSkin">
            <el-radio v-model="form.isSkin" :label="0">是</el-radio>
            <el-radio v-model="form.isSkin" :label="1">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="限售标志" prop="isSales">
            <el-radio v-model="form.isSales" :label="0">是</el-radio>
            <el-radio v-model="form.isSales" :label="1">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="drug-info-li">
      <div class="drug-info-li-title">
        <el-divider direction="vertical"></el-divider>
        <span>使用方法</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="单次剂量" prop="singleDose">
            <el-input-number v-model="form.singleDose" placeholder="请输入单次剂量"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用法" prop="drugUse">
            <el-select v-model="form.drugUse" placeholder="请选择">
              <template v-for="(item, index) in drugUses">
                <el-option :key="index" :label="item" :value="item"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="频次" prop="drugFrequency">
            <el-select v-model="form.drugFrequency" placeholder="请选择">
              <template v-for="(item, index) in frequencys">
                <el-option :key="index" :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <template v-if="showTable">
      <drugTable 
        :data="tableList" 
        @close="onCloseTable"
        @continue-add="onContinueAdd"
      >
      </drugTable>
    </template>
    <template v-if="showTable2">
      <drugTable 
        :data="tableList"
        :type="1"
        @close="onCloseTable"
        @select="onSelect"
        @onPage="onPage"
      >
      </drugTable>
    </template>
  </el-form>
</template>

<script>
import { get as getDictDetail } from "@/api/system/dictDetail";
import { getList as getUseList } from "@/api/system/use";
import img1 from "@/assets/images/demo-1.png";
import img2 from "@/assets/images/demo-2.png";
import img3 from "@/assets/images/demo-3.png";
import drugTable from "./drugTable";

export default {
  name: "drugInfo",
  inheritAttrs: false,
  components: {drugTable},
  props: {
    pharmacyId: {
      type: String,
      default: null
    },
    drugType: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      form: {
        drugName: "",
        drugSpec: "",
        drugManufactor: "",
        drugCode: "",
        approvalNumber: "",
        doseForm: "",
        drugNo: "",
        status: 0,
        salePrice: 0,
        isSellPiece: 1,
        stockWarning: "",
        sellPiecePrice: 0,
        isSkin: 1,
        isSales: 0,
        singleDose: 0,
        drugUse: "",
        drugFrequency: "",
        minDose: "",
        doseUnit: "",
        totalDose: "",
        totalDoseUnit: "",
        packageUnit: "",
        pharmacyId: "",
        drugType: null,
        coefficientName: null,
        coefficient: null
      },
      rules: {
        drugName: [
          { required: true, message: "请输入药品名称", trigger: "blur"}
        ],
        drugSpec: [
          { required: true, message: "请输入规格", trigger: "blur"}
        ],
        drugManufactor: [
          { required: true, message: "请输入厂家", trigger: "blur"}
        ],
        status: [
          { required: true, message: "请选择有效标志", trigger: "blur"}
        ],
        doseUnit: [
          { required: true, message: "请输入最小剂量单位", trigger: "blur"}
        ],
        packageUnit: [
          { required: true, message: "请选择单位", trigger: "blur"}
        ],
        salePrice: [
          { required: true, message: "请输入零售价", trigger: "blur"}
        ],
        salePrice: [
          { required: true, message: "请输入零售价", trigger: "blur"},
          { type: "number", message: "请输入正确的零售价", trigger: "blur"}
        ],
        isSellPiece: [
          { required: true, message: "请选择是否拆零", trigger: "blur"}
        ],
        stockWarning: [
          {type: "number", message: "请输入正确的预警值", trigger: "blur"}
        ],
        isSkin: [
          { required: true, message: "请选择是否皮试", trigger: "blur"}
        ],
        isSales: [
          { required: true, message: "请选择销售标志", trigger: "blur"}
        ],
        singleDose: [
          {type: "number", message: "请输入正确的剂量", trigger: "blur"}
        ],
        minDose: [
          {required: true, message: "请输入最小剂量", trigger: "blur"},
          {type: "number", message: "请输入正确的剂量值", trigger: "blur"}
        ],
        totalDose: [
          {required: true, message: "请输入总剂量", trigger: "blur"},
          {type: "number", message: "请输入正确的剂量值", trigger: "blur"}
        ],
        totalDoseUnit: [
          {required: true, message: "请输入总剂量单位", trigger: "blur"},
        ],
        packageUnit: [
          {required: true, message: "请输入包装单位", trigger: "blur"},
        ],
        sellPiecePrice: [
          {type: "number", message: "请输入正确的价格", trigger: "blur"}
        ],
        coefficientName: [
          {required: true, message: "请选择采购规格", trigger: "change"},
        ],
        coefficient: [
          {required: true, message: "请输入换算系数", trigger: "blur"},
          {type: "number", message: "请输入正确的换算系数", trigger: "blur"}
        ],
      },
      drugUses: [],
      doseDome: [
        {command: 0, text: "1片*22片/盒", img: img1},
        {command: 1, text: "40mg*14片/盒", img: img2},
        {command: 2, text: "250ml*1瓶/瓶", img: img3}
      ],
      doseDomeText: "1片*22片/盒",
      doseDomeSel: img1,
      showTable2: false,
      showSearch: false,
      showTable: false,
      searchForm: {},
      frequencys: [],
      tableList: [],
    };
  },
  created() {
    // 使用方式
    getUseList().then(res => {
      res.forEach(item => {
        this.drugUses.push(item.name);
      });
    });
    // 用药频次
    getDictDetail("frequencys").then(res => {
      res.content.forEach(item => {
        this.frequencys.push({
          label: item.label,
          value: item.value
        });
      });
    });
  },
  methods: {
    validate(fun) {
      let form = this.$refs.form;
      form.validate(valid => {
        fun(valid);
      });
    },
    clearValidate() {
      let form = this.$refs.form;
      form.clearValidate();
    },
    onCommand(command) {
      let item = this.doseDome[command];
      this.doseDomeSel = item.img;
      this.doseDomeText = item.text;
    },
    getParam() {
      this.form.pharmacyId = this.pharmacyId;
      this.form.drugType = this.drugType;
      return this.form;
    },
    resetForm(data) {
      this.$refs.form.resetFields();
      this.onCloseTable();
      if(data) {
        for(let key in this.form) {
          this.form[key] = data[key];
        }
        this.form.id = data.id;
      } else {
        delete this.form.id;
      }
    },
    onSearch() {
      if(!this.showTable2) {
        this.showTable = true;
      }
      this._loadTableList(1, 30);
    },
    onCloseTable() {
      this.showTable = false;
      this.showTable2 = false;
    },
    onContinueAdd() {
      this.showTable2 = true;
      this.showTable = false;
      this.onSearch();
    },
    onSelect(row) {
      this.showTable = false;
      this.showTable2 = false;
      this.form = row;
    },
    onPage(data) {
      this._loadTableList(data.page, data.size);
    },
    onChangeSellPiece() {
      if(this.form.isSellPiece === 1) {
        this.form.sellPiecePrice= 0;
      }
    },
    _loadTableList(page, size) {
      this.tableList.splice(0, this.tableList.length);
      setTimeout(() => {
        for(let i = 0; i < 100; i ++) {
          this.tableList.push({
            drugName: "0.9%氯化钠10" + i + "ml",
            drugSpec: "100ml:0.9g",
            drugManufactor: "昆明南疆制药有限公司",
            drugCode: "",
            approvalNumber: "",
            doseForm: "",
            drugNo: "",
            status: 0,
            salePrice: 0,
            isSellPiece: 1,
            stockWarning: "",
            sellPiecePrice: 0,
            isSkin: 1,
            isSales: 0,
            singleDose: 0,
            drugUse: "",
            drugFrequency: "",
            minDose: "",
            doseUnit: "",
            totalDose: "",
            totalDoseUnit: "",
            packageUnit: "",
            pharmacyId: "",
            drugType: null
          });
        }
      }, 1000);
    }
  }
}
</script>